<template>
  <el-container class="gogo">
    <el-container class="gogoText">
      <el-header height="80px" class="box-text">
        <el-row type="flex" justify="space-between" align="middle" class="top-text">
          <el-row type="flex" justify="start">
            <div class="text">
              大学
              <span class="english">OA</span>管理系统
              <!-- <el-col> -->
              <div class="eng">University OA Management System</div>
              <!-- </el-col> -->
            </div>
          </el-row>
          <el-row type="flex" align="middle">
            <el-col :xs="5" :sm="4" :md="4" :lg="4" :xl="4" class="text-img">
              <img src="../../public/img/logo.png" alt class="img" />
            </el-col>
            <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="15">
              <span class="font">欢迎光临</span>
            </el-col>
            <el-col :span="1" :offset="2" :xs="4" :sm="6" :md="8" :lg="9" :xl="15">
              <el-button type="text" icon="el-icon-switch-button" @click="logout">退出登入</el-button>
            </el-col>
          </el-row>
        </el-row>
      </el-header>

      <el-container>
        <el-aside width="201px" class="nav">
          <el-radio-group v-model="isCollapse">
            <el-radio-button :label="false">展开</el-radio-button>
            <el-radio-button :label="true">收起</el-radio-button>
          </el-radio-group>
          <el-menu
            router
            default-active="1"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            :collapse="isCollapse"
            :default-openeds="[num]"
          >
            <el-submenu index="1-1">
              <template slot="title" @click="openclass">
                <i class="el-icon-time"></i>
                <span slot="title">智能内外勤</span>
              </template>
              <el-menu-item index="1-1-1" :route="{path:'/about/page3'}">请假</el-menu-item>
              <el-menu-item index="1-1-2" :route="{path:'/about/page2'}">出差</el-menu-item>
              <el-menu-item index="1-1-3" :route="{path:'/about/page1'}">加班</el-menu-item>
            </el-submenu>
            <el-submenu index="1-2">
              <template slot="title">
                <i class="el-icon-date"></i>
                <span slot="title">工作汇报</span>
              </template>
              <el-menu-item index="1-2-1" :route="{path:'/about/Daily'}">日报</el-menu-item>
              <el-menu-item index="1-2-2" :route="{path:'/about/Weekly'}">周报</el-menu-item>
              <el-menu-item index="1-2-3" :route="{path:'/about/MonthlyReport'}">月报</el-menu-item>
            </el-submenu>
            <el-submenu index="1-3">
              <template slot="title">
                <i class="el-icon-user"></i>
                <span slot="title">客户管理</span>
              </template>
              <el-menu-item index="1-3-1" :route="{path:'/about/firstPage'}">校招企业客户</el-menu-item>
              <el-menu-item index="1-3-2">外部投资客户</el-menu-item>
            </el-submenu>
            <el-submenu index="1-4">
              <template slot="title">
                <i class="el-icon-coin"></i>
                <span slot="title">财务管理</span>
              </template>
              <el-menu-item index="1-4-1" :route="{path:'/about/reimbursement'}">费用报销</el-menu-item>
              <el-menu-item index="1-4-2" :route="{path:'/about/expenses'}">费用申请</el-menu-item>
              <el-menu-item index="1-4-3" :route="{path:'/about/payment'}">付款申请</el-menu-item>
              <el-menu-item index="1-4-4" :route="{path:'/about/reserve'}">备用金申请</el-menu-item>
            </el-submenu>
            <el-submenu index="1-5">
              <template slot="title">
                <i class="el-icon-coordinate"></i>
                <span slot="title">行政管理</span>
              </template>
              <el-menu-item index="1-5-1" :route="{path:'/about/logistics'}">后勤管理</el-menu-item>
              <el-menu-item index="1-5-2" :route="{path:'/about/things'}">物品领用</el-menu-item>
              <el-menu-item index="1-5-3" :route="{path:'/about/cars'}">用车申请</el-menu-item>
              <el-menu-item index="1-5-4" :route="{path:'/about/seal'}">用章申请</el-menu-item>
              <el-menu-item index="1-5-5" :route="{path:'/about/shop'}">采购</el-menu-item>
            </el-submenu>
            <el-submenu index="1-6">
              <template slot="title">
                <i class="el-icon-user"></i>
                <span slot="title">人员管理</span>
              </template>
              <el-menu-item index="1-6-1" :route="{path:'/about/staffManagement'}">员工管理</el-menu-item>
              <el-menu-item index="1-6-2" :route="{path:'/about/studentManagement'}">学生管理</el-menu-item>
            </el-submenu>
            <el-submenu index="1-7">
              <template slot="title">
                <i class="el-icon-suitcase"></i>
                <span slot="title">高效办公</span>
              </template>
              <el-menu-item index="1-7-1" :route="{path:'/about/approve'}">审批</el-menu-item>
              <el-menu-item index="1-7-2" :route="{path:'/about/meets'}">电话会议</el-menu-item>
              <el-menu-item index="1-7-3" :route="{path:'/about/office'}">智能报表</el-menu-item>
            </el-submenu>

            <el-submenu index="1-8">
              <template slot="title">
                <i class="el-icon-tickets"></i>
                <span slot="title">部门管理</span>
              </template>
              <el-menu-item index="1-8-1" :route="{path:'/about/eduzhengjiao'}">政教处</el-menu-item>
              <el-menu-item index="1-8-2" :route="{path:'/about/education'}">总务处</el-menu-item>
              <el-menu-item index="1-8-3" :route="{path:'/about/educaiwu'}">财务部</el-menu-item>
              <el-menu-item index="1-8-4" :route="{path:'/about/eduhouqingchu'}">后勤处</el-menu-item>
              <el-menu-item index="1-8-5" :route="{path:'/about/edudangan'}">档案室</el-menu-item>
              <el-menu-item index="1-8-6" :route="{path:'/about/eduxueshenghui'}">学生会</el-menu-item>
            </el-submenu>
            <el-submenu index="1-9">
              <template slot="title">
                <i class="el-icon-pie-chart"></i>
                <span slot="title">学籍成绩</span>
              </template>
              <el-menu-item index="1-9-1" :route="{path:'/about/myScore'}">学生学籍</el-menu-item>
            </el-submenu>
            <el-submenu index="1-10">
              <template slot="title">
                <i class="el-icon-setting"></i>
                <span slot="title">系统管理</span>
              </template>
              <el-menu-item index="1-10-1" :route="{path:'/about/roleManage'}">角色管理</el-menu-item>
              <el-menu-item index="1-10-2" :route="{path:'/about/userManage'}">用户管理</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      isCollapse: false,
      num: "",
    };
  },
  methods: {
    logout() {
      let that = this;
      that
        .$axios({
          method: "post",
          url: "/api/logout",
        })
        .then((data) => {
          that.$router.push('/');
          this.$message("请重新登录!");
          sessionStorage.setItem('loginState',false)
        });
    },
    openclass(e) {
      console.log(e);
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
      this.num = key;
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
  created() {
    this.num = this.$route.query.id;
    console.log(this.num);
    let that = this
  },
};
</script>

<style scoped lang="less" >
.font {
  font-family: "楷体";
  font-weight: 600;
  font-size: 17px;
}
.english {
  font-family: "Times New Roman";
  font-size: 26px;
}
.gogo {
  width: 100%;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  // background-color:silver ;
}
.eng {
  font-size: 13px;
  font-weight: 600;
  font-family: "Times New Roman";
  text-align: center;
}
.gogoText {
  // box-shadow: 0px 0px 1px 1px silver;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.box-text {
  width: 100%;
  // box-shadow: 0px 0px 1px 1px silver;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.top-text {
  height: 100%;
}
.text {
  font-size: 26px;
  font-family: "华文行楷";
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.text-img {
  width: 110px;
  height: 60px;
  border: 1px solid black;
  border-radius: 60px;
}
.img {
  width: 100%;
  height: 100%;
  border-radius: 60px;
}
.nav {
  height: 865px;
}
</style>


